<template>
  <div class="login-page">
    <div class="login-wrapper">
      <div class="login-card">
        <div class="login-header">
          <h2>登录</h2>
          <p>HIS 医院门诊管理系统</p>
        </div>

        <el-form :model="form" :rules="rules" ref="formRef" label-width="70px">
          <el-form-item label="账号" prop="username">
            <el-input v-model="form.username" placeholder="请输入账号" />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              type="password"
              show-password
              placeholder="请输入密码"
            />
          </el-form-item>

          <el-form-item label="验证码" prop="captcha">
            <div class="captcha-row">
              <el-input
                v-model="form.captcha"
                maxlength="4"
                placeholder="请输入验证码"
              />
              <img
                :src="captchaImgSrc"
                alt="验证码"
                class="captcha-img"
                @click="refreshCaptcha"
                title="点击刷新"
              />
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :loading="loading" @click="onSubmit">
              登录
            </el-button>
            <el-button link @click="goRegister">没有账号？去注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { getCaptcha, login } from '@/api/auth'

const router = useRouter()
const userStore = useUserStore()

const formRef = ref()
const loading = ref(false)
const form = ref({ username: '', password: '', captcha: '', captchaKey: '' })
const rules = {
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
}

const captchaImgSrc = ref('')
const refreshCaptcha = async () => {
  try {
    const { data } = await getCaptcha()
    form.value.captchaKey = data.key
    captchaImgSrc.value = `data:image/png;base64,${data.image}`
  } catch (e) {
    ElMessage.error(e.message || '获取验证码失败')
  }
}

onMounted(refreshCaptcha)

const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    loading.value = true
    try {
      const res = await login({
        username: form.value.username,
        password: form.value.password,
        captcha: form.value.captcha,
        key: form.value.captchaKey,
      })
      // 假设后端返回 { token, username }
      const token = res.data?.token
      const name = res.data?.username || form.value.username
      const role = res.data?.role
      if (token) userStore.setToken(token)
      userStore.setUser(name)
      userStore.setRole && userStore.setRole(role)
      ElMessage.success('登录成功')
      // 登录成功后
if (role === '管理员') {
  router.push('/')
} else if (role === '医生') {
  router.push('/doctor/patient')
} else if (role === '病人') {
  router.push('/register/counter')
} else {
  ElMessage.warning('请给出正确身份！')
}
      //router.push('/')
    } catch (e) {
      ElMessage.error(e.message || '登录失败')
      refreshCaptcha()
    } finally {
      loading.value = false
    }
  })
}

// 跳转至注册页
const goRegister = () => router.push('/auth/register')
</script>

<style scoped>
.login-page {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 更明显的动态渐变背景：青绿-白-青蓝 */
  background: linear-gradient(135deg, #26c6da 0%, #e0f7fa 50%, #1976d2 100%);
  background-size: 300% 300%;
  animation: login-bg-move 10s ease-in-out infinite alternate;
}
@keyframes login-bg-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  /* 半透明青蓝遮罩，带模糊 */
  background: linear-gradient(120deg, rgba(38,198,218,0.18) 0%, rgba(25,118,210,0.12) 100%);
  backdrop-filter: blur(2px);
  z-index: 1;
}

/* 卡片静止且半透明 */
.login-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-card {
  background: rgba(255,255,255,0.85);
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 8px 32px rgba(38,198,218,0.12), 0 2px 8px rgba(25,118,210,0.08);
  backdrop-filter: blur(10px);
}

/* 标题 */
.login-header {
  text-align: center;
  margin-bottom: 24px;
}
.login-header h2 {
  font-size: 28px;
  color: #0097a7;
  margin: 0 0 6px;
  letter-spacing: 2px;
  font-weight: 700;
  text-shadow: 0 2px 8px #b2dfdb;
}
.login-header p {
  font-size: 14px;
  color: #546e7a;
  letter-spacing: 1px;
}

/* 表单项 */
.el-form-item {
  margin-bottom: 18px;
}
:deep(.el-form-item__label) {
  color: #1976d2;
  font-weight: 500;
  font-size: 15px;
}

/* 输入框 */
:deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #b2dfdb;
  transition: border-color 0.3s, box-shadow 0.3s;
  background: #e0f7fa;
  color: #00695c;
  font-size: 16px;
}
:deep(.el-input__inner:focus) {
  border-color: #26c6da;
  box-shadow: 0 0 0 2px rgba(41,182,246,0.18);
}

/* 验证码行 */
.captcha-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.captcha-img {
  height: 36px;
  border: 1px solid #b2dfdb;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 8px #b2dfdb;
}
.captcha-img:hover {
  border-color: #26c6da;
  box-shadow: 0 4px 12px #26c6da;
}

/* 登录按钮简洁统一 */
.el-button--primary {
  width: 100%;
  background: linear-gradient(135deg, #26c6da 0%, #1976d2 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 4px 16px rgba(41,182,246,0.12);
  transition: background 0.3s, box-shadow 0.3s;
}
.el-button--primary:hover {
  background: linear-gradient(135deg, #1976d2 0%, #26c6da 100%);
  box-shadow: 0 8px 24px rgba(41,182,246,0.18);
}

/* 注册链接按钮 */
.el-button--link {
  margin-left: 0;
  color: #0097a7;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: color 0.2s;
}
.el-button--link:hover {
  color: #1976d2;
  text-decoration: underline;
}

/* 响应式适配 */
@media (max-width: 600px) {
  .login-wrapper { max-width: 100vw; padding: 0 4px; }
  .login-card { padding: 18px 6px; }
  .login-header h2 { font-size: 20px; }
}
</style>
